<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 表单能提供信息到远程服务器。比如：注册，登录 -->

		<!--
		 form标签中，必须制定属性 action ，该属性指向的是服务器的地址。
		 -->
		<form action="target.html" method="">
			<!-- 
			H:\尚硅谷前端学科全套教程\1.前端学科--基础阶段\尚硅谷HTML+CSS教程\视频\视频5
			 《86.尚硅谷_HTML&CSS基础_表单项一》
			 -->

			<!-- 
			input创建文本框，type属性是text 
				如果希望表单项中的数据提交到服务器，还必须添加name属性。
				name表示提交内容的名字，如果不写就不会提交，例如：
				file:///D:/AtGuiGuLearn/day08/target.html?username=admin
				?后面的usename=admin叫做“查询字符串”，用“&”连接
				格式：属性名=属性值&属性名=属性值
				
				文本框中的默认值，设置value
			-->

			<!-- 
			label标签 专门用来选择表单中的文字。
			可以指定一个for属性，指定一个表单项的id值。
			这样，鼠标点击“用户名”这个文字，光标会自动显示在input中。
			-->
			<label for="um">用户名</label>
			<input type="text" name="username" id="um" value="admin" />
			<br />

			<label for="password">密码</label>
			<input type="password" name="password" id="password" value="" />
			<br />

			<!-- 
			单选按钮 
				- 需要用户选择，不需要填写内容的，使用radio	
				- 默认选中 checked="checked"
			-->
			<label>性别</label>
			<input type="radio" name="gender" id="male" value="male" /><label for="male">男</label>
			<input type="radio" name="gender" id="female" value="female" checked="checked" /><label for="female">女</label>
			<br />

			<!-- 
			多选框 
				- 使用input创建一个多选框，他的type属性使用checkbox
			-->
			爱好 <input type="checkbox" name="hobby" id="" value="zq" />足球
			<input type="checkbox" name="hobby" id="" value="lq" />篮球
			<input type="checkbox" name="hobby" id="" value="ymq" />羽毛球
			<br />

			<!-- 
			下拉列表
				- 使用select创建
				- 下拉列表的name属性，指定给select
				- value属性，指定给option
				- 默认选中，selected="selected"
				- multiple="multiple" 这样设置，下拉列表变成多选下拉列表。
			 -->
			你喜欢的明星
			<!-- <select name="starname" multiple="multiple"> -->
			<select name="starname">

				<!-- 
				分组
				 -->
				<optgroup label="分组一">
					<option value="1">111</option>
					<option value="2">222</option>
				</optgroup>

				<optgroup label="分组二">
					<option value="3">333</option>
					<option value="4">444</option>
				</optgroup>

				<option value="1">111</option>
				<option value="2">222</option>
				<option value="3" selected="selected">333</option>
			</select>
			<br>

			自我介绍
			<textarea rows="10" cols="10" name="selfinfo"></textarea>
			<br>
			<br>

			<!-- 提交按钮提交表单信息到服务器，使用input -->
			<input type="submit" name="" id="" value="提交" />

			<!-- 重置 点击以后表单中的内容恢复默认值 -->
			<input type="reset" name="reset" id="reset" value="重置" />

			<!-- 按钮 这两个都是一样的功能 -->
			<input type="button" name="btn" id="btn" value="按钮" />

			<br>
			<br>

			<button type="submit">提交按钮</button>
			<button type="reset">重置按钮</button>
			<button type="button">一般按钮</button>
			
			<br>
			<br>
			
			<fieldset id="">
				<legend>fieldset 的子标签 legend 表示组名</legend>
				
				
			</fieldset>
		</form>
	</body>
</html>
